<template>
  <div class="new_common_menu">
    <div class="new_common_menu_title">
      快捷入口
      <span class="look_all" @click="addCommonMenu">更多</span>
    </div>

    <template v-if="isHome">
      <div class="menu_list">
        <app-link
          class="item com-hover"
          v-for="(item, index) in commonMenuList"
          :key="index"
          :to="item.path"
        >
          <div>
            <i :class="item.icon"></i>
            <p>{{ item.fullName }}</p>
          </div>
        </app-link>
        <!-- <div class="com-hover">
                <div @click="addCommonMenu">
                    <i class="el-icon-folder-add"></i>
                    <p>更多</p>
                </div>
            </div> -->
      </div>
    </template>
    <el-dialog
      title="添加常用菜单"
      :append-to-body="true"
      :visible.sync="dialogMenu"
      width="30%"
      height="400px"
      :before-close="handleClose"
    >
      <div class="menuTree" v-if="dialogMenu">
        <el-tree
          :data="menuTree"
          :default-expand-all="true"
          show-checkbox
          node-key="id"
          ref="tree"
          :default-checked-keys="ids"
          :props="defaultProps"
        >
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogMenu = false">取 消</el-button>
        <el-button type="primary" @click="getCheckedNodes">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import AppLink from "./Link";
// import { cancelHandheldMenu, collectMenu } from "@/api/home";
export default {
  props: {
    isHome: { default: true },
  },
  components: { AppLink },
  data() {
    return {
      ids: [],
      commonMenuList: [],
      collectMenuListCopy: [],
      menuTree: [],
      dialogMenu: false,
      defaultProps: {
        children: "children",
        label: "fullName",
      },
    };
  },
  computed: {
    ...mapState({
      menuList: (state) => state.user.menuList,
      collectMenuList: (state) => state.collectMenu.collectMenuList,
    }),
  },
  watch: {
    "$store.state.collectMenu.collectMenuList": {
      handler: function (newVal, oldVal) {
        this.collectMenuListCopy = newVal;
        this.getList();
      },
      deep: true,
    },
  },
  created() {
    this.collectMenuListCopy = this.collectMenuList;
    this.getList();
    this.$emit("clt", this.commonMenuList);
    if (this.commonMenuList.length == 0) {
      this.recursionData(this.menuList);
    }
    console.log(this.commonMenuList, "======+++++++");
  },
  methods: {
    recursionData(arr) {
      arr.forEach((item) => {
        if (item.children) {
          this.recursionData(item.children);
        } else if (this.commonMenuList.length < 10) {
          this.commonMenuList.push(item);
        }
      });
    },
    getList() {
      let list = this.collectMenuListCopy.filter((o) => o.id);
      list = list.map((o, i) => {
        let path = "/" + o.urlAddress;
        // 大屏
        if (o.type == 6) {
          let propertyJson = o.propertyJson ? JSON.parse(o.propertyJson) : null,
            moduleId = "";
          if (propertyJson) moduleId = propertyJson.moduleId || "";
          path = `${this.define.dataV}/view/${moduleId}?token=${getToken()}`;
        }
        if (o.type == 7) {
          if (o.linkTarget === "_self") {
            path = "/" + o.enCode;
          } else {
            path = o.urlAddress
              .replace(/\${dataV}/g, this.define.dataV)
              .replace(/\${jnpfToken}/g, getToken());
          }
        }
        return {
          ...o,
          path,
        };
      });
      this.commonMenuList = list;
      this.commonMenuList.forEach((item, index) => {
        this.ids.push(item.id);
        item.iconBackgroundColor = this.colorList[index % 10];
      });
      // this.commonMenuList.length = 7
    },
    addCommonMenu() {
      this.ids = [];
      this.commonMenuList &&
        this.commonMenuList.forEach((item, index) => {
          this.ids.push(item.id);
          // item.iconBackgroundColor = this.colorList[index%10]
        });
      this.menuTree = this.menuList;
      this.recursionTree(this.menuTree);
      this.dialogMenu = true;
    },
    getCheckedNodes() {
      let arr = this.$refs.tree.getCheckedNodes();
      let ids = [];
      arr.forEach((item) => {
        if (!item.children) {
          ids.push(item.id);
        }
      });
      console.log(ids, "======");
      if (ids.length > 10) {
        this.$message({
          message: "最多选择7个常用菜单，请重新选择！",
          type: "warning",
        });
        return;
      }
      // else if (ids.length < 5) {
      //   this.$message({
      //     message: "最少选择5个常用菜单，请重新选择！",
      //     type: "warning",
      //   });
      //   return;
      // }
      collectMenu({ moduleIdList: ids }).then((res) => {
        this.$message({
          message: "添加成功！",
          type: "success",
        });
        this.$store.dispatch("collectMenu/getCollectMenuList");
        this.dialogMenu = false;
      });
    },
    recursionTree(arr) {
      arr.forEach((item) => {
        if (item.children && item.children.length > 0) {
          item.disabled = true;
          this.recursionTree(item.children);
        } else {
        }
      });
    },
    handleClose() {
      this.dialogMenu = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.new_common_menu {
  width: 100%;
  height: 100%;
  padding: 15px;
  border-radius: 8px;
  background-color: #fff;
  // background-image: url("../../../assets/images/menu-back.png");
  background-repeat: no-repeat;
  .new_common_menu_title {
    font-family: "PingFang SC";
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    line-height: 24px;
    padding: 0 10px;
    .look_all {
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 14px;
      color: #acadad;
      line-height: 27px;
      float: right;
      cursor: pointer;
    }
    .look_all:hover {
      color: #008dff;
    }
  }
  .menu_list {
    padding: 10px 0 20px;
    .com-hover {
      display: inline-block;
      width: 50%;
      cursor: pointer;
      text-align: center;
      div {
        width: 93px;
        height: 76px;
        margin: auto;
        padding: 11px 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 8px;
        margin-bottom: 10px;

        i {
          font-size: 24px;
          color: #999;
        }
        p {
          font-family: "PingFangSC";
          font-weight: 400;
          font-size: 14px;
          color: #838789;
          line-height: 24px;
          margin-top: 5px;
          padding: 0 4px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      div:hover {
        color: #ffffff;
        background-color: #008dff;
        box-shadow: 0px 5px 5px #8ccafe;
      }
      div:hover i {
        color: #ffffff;
      }
      div:hover p {
        color: #ffffff;
      }
    }
  }
}
.menuTree {
  height: 300px;
  overflow: auto;
}
</style>
